<template>
  <div>
    <div class="header">
      <h1
        class="header-title"
        style="margin:0;
					padding:0;
					line-height:64px;
					text-align:center;
					font-size:28px;
					font-weight:400;
					color:#e9c29d;"
      >乌海及其周边地区污染源成因及其对策大数据分析平台</h1>
    </div>
    <div class="wrapper">
      <div class="content">
        <div class="col col-l">
          <div class="xpanel-wrapper xpanel-wrapper-40">
            <div class="xpanel xpanel-l-t">
              <!-- <div class="title">标题一</div> -->
              <div class="body-40" :style="{ padding: '10px' }">
                <div id="bar-chart-div" class="body-40"></div>
              </div>
            </div>
          </div>
          <div class="xpanel-wrapper xpanel-wrapper-45">
            <div class="xpanel xpanel-r-b">
              <div class="title">标题六</div>
             
            </div>
          </div>
        </div>
        <div class="col col-c">
          <div class="xpanel-wrapper xpanel-wrapper-60">
            <div class="xpanel no-bg"></div>
          </div>
          <div class="xpanel-wrapper xpanel-wrapper-25">
            <div class="xpanel xpanel-c-b">
              <div class="title title-long">标题三</div>
            </div>
          </div>
        </div>
        <div class="col col-r">
          <div class="xpanel-wrapper xpanel-wrapper-60">
            <div class="xpanel xpanel-l-b">
              <div class="title">标题二</div>
            </div>
          </div>
          <div class="xpanel-wrapper xpanel-wrapper-25">
            <div class="xpanel xpanel-r-t">
              <div class="title">标题四</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import './index.css';
import BarChart from '../../components/display/BarChart.vue';
// let config = require('../../config/config');
// import Utils from '../../scripts/Utils';
export default {
  name: 'display',
  components: {
    BarChart
  },
  data() {
    return {
      contentHeight: 0
    };
  },
  mounted() {
    let windowHeight = document.documentElement.clientHeight;
    this.contentHeight = windowHeight;
    this.initBarChart();
  },
  methods: {
    initBarChart() {
      let chartDiv = document.getElementById('bar-chart-div');
      this.barChart = this.$echarts.init(chartDiv);

      var XData=['甘肃', '青海', '内蒙古', '重庆', '山西', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '江西', '山东', '河南', '湖南', '湖北', '广东', '海南', '四川', '贵州', '云南'];
      var yData=[];
      XData.map(function(){
        yData.push((Math.random()*1000+100).toFixed(0));
      });
      var dataMin=parseInt(Math.min.apply(null, yData)/2);
      // for(var i=0;i<XData.length;i++){
    
      // }
      let option = {
        backgroundColor:'#080f15',
        xAxis: {
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: false
          },
          data: XData,
          axisLabel: {
            formatter: function(value) {
              var ret = ''; //拼接加\n返回的类目项
              var maxLength = 1; //每项显示文字个数
              var valLength = value.length; //X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1) //如果类目项的文字大于3,
              {
                for (var i = 0; i < rowN; i++) {
                  var temp = ''; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + '\n';
                  ret += temp; //凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            },
            interval: 0,
            fontSize: 16,
            fontWeight: 100,
            textStyle: {
              color: '#9faeb5',

            }
          },
          axisLine: {
            lineStyle: {
              color: '#4d4d4d'
            }
          }
        },
        yAxis: {
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: false
          },
          min: dataMin,
          axisLabel: {
            textStyle: {
              color: '#9faeb5',
              fontSize: 16,
            }
          },
          axisLine: {
            lineStyle: {
              color: '#4d4d4d'
            }
          }
        },
        'tooltip': {
          'trigger': 'item',
          'textStyle': {
            'fontSize': 12
          },
          'formatter': '{b0}:{c0}'
        },
        series: {
          type:'bar',
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#00d386' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#0076fc' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
              barBorderRadius: 15,
            }
          },
          // barWidth: 7,
          data: yData
        }
      };
      this.barChart.setOption(option);
      window.onresize = this.barChart;
    }
  }
};
</script>
<style>
.body-40 {
  height: calc(100% - 10px);
}
</style>
